<template>
  <div class="scanner">
    <van-nav-bar title="条形码还货" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row type="flex" justify="center">
      <van-col span="24">
        <van-form class="common-form">
          <van-field label="出库单号" v-model="returnScanParams.orderCode" disabled />
          <van-field label="订单行号" v-model="returnScanParams.orderLineNo" disabled />
          <van-field label="库位" v-model="returnScanParams.locationCode" disabled />
          <van-field label="入库箱号" v-model="returnScanParams.recCartonNumber" disabled />
          <van-field
            v-model="barCodeShowContent"
            ref="barCode"
            id="barCode"
            name="商品条码"
            label="商品条码"
            placeholder="商品条码"
            :readonly="barCodeReadOnly"
            @focus="barCodeFocusClick"
            @click="barCodeFocusClick"
            @keyup.enter.native="!pdaScanData.data ? verifyBarCode() : ''"
          />
          <van-field
            v-model="returnScanParams.returnLocationCode"
            ref="returnLocationCode"
            id="returnLocationCode"
            name="还货库位"
            label="还货库位"
            placeholder="还货库位"
            :readonly="returnLocationCodeReadOnly"
            @focus="returnLocationCodeFocusClick"
            @click="returnLocationCodeFocusClick"
            @keyup.enter.native="!pdaScanData.data ? executeReturnScan() : ''"
          />
        </van-form>
        <van-row>
          <div style="margin: 20px 8px 8px 8px;">
            <van-button type="primary" size="small" @click="nextOne()" block>下一单</van-button>
          </div>
        </van-row>
        <van-row>
          <van-list :loading="loading" :finished="true" finished-text="暂无更多数据">
            <van-cell v-for="item in list" :key="item.sku">
              <van-row>
                <van-col span="12">
                  商品编码：
                </van-col>
                <van-col span="12" style="color:red">
                  {{ item.sku }}
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  还货库位：
                </van-col>
                <van-col span="12">
                  {{ item.returnLocationCode }}
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  还货数量：
                </van-col>
                <van-col span="12">
                  {{ item.returnCount }}
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  扫描时间：
                </van-col>
                <van-col span="12">
                  {{ item.createdDateStr }}
                </van-col>
              </van-row>
            </van-cell>
          </van-list>
        </van-row>
      </van-col>
    </van-row>

    <!-- 普通消息响应遮罩层 -->
    <van-overlay :show="showMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-button type="primary" @click="closeOverlay()">关闭</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 加载遮罩 -->
    <van-overlay :show="showLoadingOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">加载中......</div>
          </van-row>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {verifyBarCode, executeReturnScanByBarCode} from "@/api/biz/returnScan/returnScan.js";

export default {
  name: "returnScan",
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  watch: {
    // 扫描枪操作
    pdaScanData: {
      handler(data) {
        // this.scanEvent(data.data);
        let input = document.activeElement.id;
        if (input == "barCode") {
          this.barCodeShowContent = data.data;
          this.verifyBarCode();
        }
        if (input == "returnLocationCode") {
          this.returnScanParams.returnLocationCode = data.data;
          this.executeReturnScan();
        }
      },
      deep: true
    }
  },
  created() {
    // 默认光标在商品条码
    this.barCodeFocus();

    // 获取当前登录用户名
    this.returnScanParams.user = this.userData.sysUserLoginName;

    // 获取货主/仓库/品牌
    if (this.$root.storerWarehouseBrand === undefined) {
      // this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
      this.returnScanParams.storerId = "";
      this.returnScanParams.wareHouseId = "";
      this.returnScanParams.brandId = "";
    } else {
      this.returnScanParams.storerId = this.$root.storerWarehouseBrand.storerId;
      this.returnScanParams.wareHouseId = this.$root.storerWarehouseBrand.warehouseId;
      this.returnScanParams.brandId = this.$root.storerWarehouseBrand.brandId;
    }
  },
  data() {
    return {
      // 普通遮罩
      showMsgOverlay: false,
      showMsg: "",
      // 当前得失焦点的文本框
      currentBlurName: "",
      // 加载遮罩
      showLoadingOverlay: false,

      // 只读选项
      barCodeReadOnly: false,
      returnLocationCodeReadOnly: false,
      // 定义扫描数据
      scanData: [],

      // 商品条码显示内容
      barCodeShowContent: "",
      // 表单参数
      returnScanParams: {
        id:"",
        storerId:"",
        wareHouseId:"",
        brandId:"",
        orderCode: "",
        orderLineNo: "",
        locationCode: "",
        recCartonNumber: "",
        qrCode: "",
        returnLocationCode: "",
        user: "",
        sku: "",
        barCode:""
      },
      // 列表数据
      list: [],
      // list加载
      loading: false
    };
  },
  methods: {
    // 扫描枪扫描
    clickEvent() {
      this.scanData = [];
      // this.$toast.success("扫描数据被清理了");
    },
    scanEvent(data) {
      this.scanData.push(data);
    },
    scanErrorEvent() {},
    cellClickEvent() {},
    // 光标跳转至商品条码
    barCodeFocus() {
      this.$nextTick(() => {
        this.$refs.barCode.focus();
      });
    },
    // 光标跳转还货库位号
    returnLocationCodeFocus() {
      this.$nextTick(() => {
        this.$refs.returnLocationCode.focus();
      });
    },
    // 商品条码框点击或失焦
    barCodeFocusClick() {
      this.barCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "barCode";
      setTimeout(() => {
        this.barCodeReadOnly = false;
      }, 200);
    },
    // 还货库位框点击或失焦
    returnLocationCodeFocusClick() {
      this.returnLocationCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "returnLocationCode";
      setTimeout(() => {
        this.returnLocationCodeReadOnly = false;
      }, 200);
    },
    // 关闭遮罩
    closeOverlay() {
      this.showMsgOverlay = false;
      // 将焦点回到原位置
      if (this.currentBlurName == "barCode") {
        this.barCodeFocus();
      } else if (this.currentBlurName == "returnLocationCode") {
        this.returnLocationCodeFocus();
      }
    },
    // 遮罩层消息展示设置
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
    },
    // 验证商品条码
    verifyBarCode() {
      // 赋值
      this.returnScanParams.barCode = this.barCodeShowContent;
      if (this.returnScanParams.barCode == "") {
        this.msgShowTime("请先扫描商品条码！");
        this.barCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      verifyBarCode(this.returnScanParams).then(response => {
        // 加载遮罩
        this.showLoadingOverlay = false;

        if (response.data.status) {
          // 赋值
          this.returnScanParams.orderCode = response.data.data.orderCode;
          this.returnScanParams.orderLineNo = response.data.data.orderLineNo;
          this.returnScanParams.locationCode = response.data.data.locationCode;
          this.returnScanParams.recCartonNumber = response.data.data.recCartonNumber;

          this.returnScanParams.sku = response.data.data.sku;
          this.returnScanParams.returnLocationCode = response.data.data.returnLocationCode;
          // 赋值id
          this.returnScanParams.id = response.data.data.id;
          // 赋值SKU
          this.barCodeShowContent = response.data.data.sku;
          // 赋值QrCode
          this.returnScanParams.qrCode = response.data.data.qrCode;
          // 赋值列表
          this.list = response.data.data.list;

          // 跳转到还货库位
          this.returnLocationCodeFocus();
        } else {
          // 清空数据，回到商品条码弹窗
          this.clearBaseData();
          this.barCodeFocus();
          this.msgShowTime(response.data.message);
        }
      });
    },
    // 清空基本数据
    clearBaseData() {
      // 清空赋值
      this.returnScanParams.orderCode = "";
      this.returnScanParams.orderLineNo = "";
      this.returnScanParams.locationCode = "";
      this.returnScanParams.recCartonNumber = "";

      this.returnScanParams.id = "";
      this.returnScanParams.qrCode = "";
      this.returnScanParams.barCode = "";
      this.returnScanParams.orderCode = "";
      this.barCodeShowContent = "";
      this.returnScanParams.returnLocationCode = "";

      this.list = [];
    },
    // 执行退货扫描
    executeReturnScan() {
      // 验证商品条码
      if (this.returnScanParams.barCode == "") {
        this.$notify({type: "warning", message: "请先扫描商品条码！"});
        this.barCodeFocus();
        return false;
      }
      // 验证还货库位
      if (this.returnScanParams.returnLocationCode == "") {
        this.$notify({type: "warning", message: "请先扫描还货库位！"});
        this.retunLocationCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      executeReturnScanByBarCode(this.returnScanParams).then(response => {
        // 加载遮罩
        this.showLoadingOverlay = false;

        if (response.data.status) {
          this.$notify({type: "success", message: response.data.message});
          // 清空数据，回到商品条码弹窗
          this.clearBaseData();
          this.barCodeFocus();
        } else {
          // 清空数据，回到还货库位
          this.returnScanParams.returnLocationCode = "";
          this.returnLocationCodeFocus();
          this.msgShowTime(response.data.message);
        }
      });
    },
    // 返回上一级页面
    onClickLeft() {
      this.$router.go(-1);
    },
    nextOne() {
      this.returnScanParams.orderCode = "";
      this.returnScanParams.locationCode = "";
      this.returnScanParams.orderLineNo = "";
      this.returnScanParams.recCartonNumber = "";

      this.returnScanParams.qrCode = "";
      this.returnScanParams.id = "";
      this.returnScanParams.barCode = "";
      this.barCodeShowContent = "";
      this.returnScanParams.returnLocationCode = "";
      this.list = [];
      this.barCodeFocus();
    }
  }
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}

.van-cell-style {
  .van-cell__value {
    width: 40%;
    text-align: center;
    color: red;
  }
  padding-right: 0px;
  padding-left: 0px;
}
</style>
